<template>
  <div class="warp">
    <div class="warp-l">
      <button class="flag-color">个人注册</button>
    </div>
    <div class="warp-r">
      <div>个人注册</div>
      <div class="warp-r-b">
        <span>用户名</span>
        <span>
          <input type="text" placeholder="邮箱/电话号码" v-model="user" />
        </span>
      </div>
      <div class="warp-r-b">
        <span>密码</span>
        <span>
          <input type="password" v-model="psw" />
        </span>
      </div>
      <div class="warp-r-b">
        <span>确认密码</span>
        <span>
          <input type="password" v-model="psw1" />
        </span>
      </div>
      <div>
        <button class="flag-color finger" @click="userRegister">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import API from "../api/api.js";
export default {
  data() {
    return {
      user: null,
      psw: null,
      psw1: null
    };
  },
  methods: {
    toPage(e) {
      this.$router.push({ name: e });
    },
    userRegister() {
      var reE = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      var reI = /^1[34578]\d{9}$/;
      var reP = /^[0-9a-zA-Z]{6,11}$/;
      if (!(reE.test(this.user) || reI.test(this.user))) {
        this.$message("是邮箱或者电话");
        return;
      }
      if (this.psw != this.psw1) {
        this.$message("2次密码不相同");
        return;
      }
      if (!reP.test(this.psw)) {
        this.$message("密码为6-11位");
        return;
      }
      API.personal_registration(this.user, this.psw).then(res => {
        if (res.data.code == 0) {
          this.$message(res.data.msg);
          return;
        }
        if (res.data.code == 1) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.toPage("login");
        }
      });
    }
  }
};
</script>
<style scoped>
.purple {
  color: #800080;
}
.warp {
  width: 100%;
  display: flex;
}
.warp-l {
  border-right: 0.3rem solid #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 1rem;
}
.warp-l button {
  margin-top: 1rem;
}
.flag-color {
  background: #800080;
  color: #fff;
}
.warp-r {
  text-align: center;
  padding: 5rem 30%;
}
.warp-r div {
  margin-top: 0.2rem;
}
.warp-r-b {
  display: flex;
  justify-content: space-between;
}
</style>
